<title>系统菜单</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>平台管理</cite></a>
        <a><cite>系统菜单</cite></a>
    </div>
</div>
<div id="module-app" class="layui-fluid" v-cloak>
    <div class="layui-inline">
        <div class="layui-btn-group">
            <button :class="{'layui-btn layui-btn-sm layui-btn-disabled':Disabled(),'layui-btn layui-btn-sm':!Disabled()}" v-bind:disabled="Disabled()" v-on:click="Open('editInfo','修改',SelectedModel)"><i class="fa fa-pencil-square-o"></i>  修改</button>
            <button :class="{'layui-btn layui-btn-sm layui-btn-disabled':Disabled(),'layui-btn layui-btn-sm':!Disabled()}" v-bind:disabled="Disabled()" v-on:click="Delete"><i class="fa fa-trash-o"></i>  删除</button>
            <button class="layui-btn layui-btn-sm" v-on:click="Open('editInfo','添加')"><i class="fa fa-plus"></i>  添加</button>
        </div>
        <div class="layui-inline">
            <div class="layui-input" style="height:30px;">
                <input id="txt_keyword" type="text" placeholder="名称" class="layui-block" style="width:200px;height:28px;line-height:28px;border:none;vertical-align:middle;" v-model="SearchModel.keyword">
                <button id="btn_search" type="button" class="layui-btn" v-on:click="Search" style="height:28px;line-height:28px;vertical-align:middle;"><i class="fa fa-search"></i></button>
            </div>
        </div>
    </div> 
    <table class="table table-hover layui-table">
        <thead>
            <tr>
                <th>名称</th>
                <th>链接</th>
                <th width="50px">类型</th>
                <!--<th width="20px">菜单</th>
                <th width="20px">展开</th>
                <th width="20px">公共</th>-->

                <th width="40px">排序</th>
                <th width="50%">介绍</th>
                <th width="80px">状态</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in Models" :class="{'selected':SelectedModel == item}" v-on:click="SelectRow(item)" :id="item.Id" v-bind:level="item.Level" v-bind:parent-id="item.ParentId">
                <td>
                    <span v-html="appendRetract(item.Level)"></span>
                    <div v-if="item.HasChildren" v-on:click="expandChildren($event.currentTarget)" style="left:0px;cursor:pointer;" class="fa fa-caret-down"></div>
                    <div v-if="!item.HasChildren" style="width:12px;height:12px;display:inline-block;"></div>

                    {{item.Data.Name}}
                </td>
                <td>{{ item.Data.UrlAddress }}</td>
                <td>{{ item.Data.OpenTarget | Target }}</td>
                <!--<td><checkbutton v-bind:value="item.Data.IsMenu" v-bind:text="item.Data.IsMenu?'是':'否'"></checkbutton></td>
    <td><checkbutton v-bind:value="item.Data.IsExpand" v-bind:text="item.Data.IsExpand?'是':'否'"></checkbutton></td>
    <td><checkbutton v-bind:value="item.Data.IsPublic" v-bind:text="item.Data.IsPublic?'是':'否'"></checkbutton></td>-->
                <!--<td><div class="layui-unselect layui-form-checkbox" v-bind:class="{'layui-form-checked':item.Data.IsMenu}" lay-skin="primary"><i class="layui-icon"></i></div></td>
    <td><div class="layui-unselect layui-form-checkbox" v-bind:class="{'layui-form-checked':item.Data.IsExpand}" lay-skin="primary"><i class="layui-icon"></i></div></td>
    <td><div class="layui-unselect layui-form-checkbox" v-bind:class="{'layui-form-checked':item.Data.IsPublic}" lay-skin="primary"><i class="layui-icon"></i></div></td>
    <td><div class="layui-unselect layui-form-checkbox" v-bind:class="{'layui-form-checked':item.Data.IsEnabled}" lay-skin="primary"><i class="layui-icon"></i></div></td>-->
                <td>{{ item.Data.SortCode }}</td>
                <td  width="50%">{{ item.Data.Description }}</td> 
                <td><switchbutton v-bind:value="item.Data.IsEnabled"  v-bind:text="item.Data.IsEnabled?'启用':'停用'"></switchbutton></td>
            </tr>
        </tbody>
    </table>
    <form id="module-dailog" v-show="false" class="layui-form" style="padding:20px;" v-cloak>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">上级</label>
                <div class="layui-input-inline">
                    <select id="ParentId" name="ParentId" lay-filter="ParentId" lay-search="" v-model="Model.ParentId">
                        <option value="">直接选择或搜索选择</option>
                        <option v-for="pitem in OptionItems[0]" v-bind:value="pitem.id" v-html="pitem.text"></option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">名称</label>
                <div class="layui-input-inline">
                    <input id="Name" name="Name" type="text" lay-verify="required" class="layui-input" placeholder="请输入名称" v-model="Model.Name" />
                </div>
            </div>
        </div>



        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">链接</label>
                <div class="layui-input-inline">
                    <input id="UrlAddress" name="UrlAddress" type="text" class="layui-input" v-model="Model.UrlAddress" />
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-inline">
                    <select id="OpenTarget" name="OpenTarget" lay-verify="required" v-model="Model.OpenTarget">
                        <option value="">请选择类型</option>
                        <option value="open" title="open">内容页</option>
                        <option value="iframe" title="iframe">框架页</option>
                        <option value="blank" title="blank">新窗口</option>
                        <option value="expand" title="expand">无页面</option>
                    </select>
                </div>
            </div>

        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">图标</label>
                <div class="layui-input-inline">
                    <!--<input type="text" id="iconPicker" lay-filter="iconPicker" class="layui-input">-->
                    <input id="Icon" name="Icon" type="text" class="layui-input" v-model="Model.Icon">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">序号</label>
                <div class="layui-input-inline">
                    <input id="SortCode" name="SortCode" type="number" min="-1" class="layui-input" placeholder="请输入排序" v-model="Model.SortCode" />
                </div>
            </div>

        </div>


        <div class="layui-form-item">

            <label class="layui-form-label">复选框</label>
            <div class="layui-input-block">
                <!--<checkbutton v-bind:value="Model.IsMenu" v-on:change="Model.IsMenu=!Model.IsMenu;" v-bind:text="Model.IsMenu?'是':'否'"></checkbutton>
                <checkbutton v-bind:value="Model.IsPublic" v-on:change="Model.IsPublic=!Model.IsPublic;" v-bind:text="Model.IsPublic?'是':'否'"></checkbutton>
                <checkbutton v-bind:value="Model.IsExpand" v-on:change="Model.IsExpand=!Model.IsExpand;" v-bind:text="Model.IsExpand?'是':'否'"></checkbutton>-->
                <switchbutton v-bind:value="Model.IsEnabled" v-on:change="Model.IsEnabled=!Model.IsEnabled;" v-bind:text="Model.IsEnabled?'启用':'禁用'"></switchbutton>

            </div>


        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea id="Description" name="Description" class="layui-textarea" style="width: 514px;resize:none;" v-model="Model.Description"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="save">保存</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['admin', 'laypage', 'table', 'form', 'table', 'ling', 'iconPicker'], function () {
        var $ = layui.$;
        var table = layui.table;
        var laypage = layui.laypage;
        var form = layui.form;
        var table = layui.table;
        var ling = layui.ling;
        var iconPicker = layui.iconPicker;
        var laydate = layui.laydate;
        var dialogIndex;
        var app = $('#module-app').Grid({
            SearchUrl: "/SystemManage/Module/GetModels"
            , DeleteUrl: "/SystemManage/Module/Delete"
            , EditUrl: "/SystemManage/Module/Update"
            , AddUrl: "/SystemManage/Module/Add"
            , OptionsUrl: ["/SystemManage/Module/GetMenus"] //级联数据
            , DialogConfig: function (key) {
                return {
                    title: app.Title,
                    area: ['704px'], //宽高
                    content: $("#module-dailog"),
                    opened: function (index) {
                        if (app.EditModel)
                            app.Model = app.Model.Data;//取下一层级数据
                        dialogIndex = index;
                    }
                }
            }
            , updated: function () {

                form.render();
            }

        });

        //监听 下拉选择
        form.on('select', function (data) {
            if (app.Model)
                app.Model[data.elem.name] = data.value;
        });


        //iconPicker.render({
        //    // 选择器，推荐使用input
        //    elem: '#iconPicker',
        //    // 数据类型：fontClass/unicode，推荐使用fontClass
        //    type: 'fontClass',
        //    // 是否开启搜索：true/false
        //    search: true,
        //    // 点击回调
        //    click: function (data) {
        //        console.log(data);
        //    }
        //});

        ///**
        // * 选中图标 （常用于更新时默认选中图标）
        // * @param filter lay-filter
        // * @param iconName 图标名称，自动识别fontClass/unicode
        // */
        //iconPicker.checkIcon('iconPicker', 'layui-icon-star-fill');


        ////监听提交
        form.on('submit(save)', function (data) {
            var code = app.Save();
            if (code == 0 && dialogIndex)
                layer.close(dialogIndex);
            return false;
        });

    });

</script>
